<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"
	language="java"%>
<%@ taglib prefix="s" uri="/struts-tags"%>

<h2>Thông Tin Hệ Thống Sân</h2>
<s:if test="#session.user.role.id == 3 || #session.user.role.id == 2">
	<jsp:include page="soccerFieldForm.jsp"></jsp:include>
</s:if>
<hr>
<div class="list-table">
	<s:if test="#session.user.role.id == 3 || #session.user.role.id == 2">
		<h2>Danh sách sân bóng</h2>
	</s:if>
	<table id="ver-zebra">
		<colgroup>
			<col class="vzebra-odd" />
			<col class="vzebra-even" />
			<col class="vzebra-odd" />
			<col class="vzebra-even" />
			<col class="vzebra-odd" />
			<col class="vzebra-even" />
			<col class="vzebra-odd" />
			<col class="vzebra-even" />
		</colgroup>
		<thead>
			<tr>
				<s:if
					test="#session.user.role.id == 3 || #session.user.role.id == 2">
					<th scope="col" id="vzebra-comedy">Chọn</th>
				</s:if>
				<th scope="col" id="vzebra-adventure">Hệ thống sân</th>
				<th scope="col" id="vzebra-adventure">Quận</th>
				<th scope="col" id="vzebra-adventure">Địa chỉ</th>
				<th scope="col" id="vzebra-adventure">Nhân viên</th>
				<th scope="col" id="vzebra-adventure">Trạng thái</th>
				<th scope="col" id="vzebra-adventure">Bảng giá</th>
				<th scope="col" id="vzebra-adventure">Mô tả</th>
			</tr>
		</thead>
		<tbody>
			<s:if test="%{listSoccerField.isEmpty()}">
				<tr>
					<td colspan="8">Chưa có dữ liệu</td>
				</tr>
			</s:if>
			<s:else>
				<s:iterator value="listSoccerField">
					<tr>
						<s:if
							test="#session.user.role.id == 3 || #session.user.role.id == 2">
							<td><s:if test="!delete">
									<input type="radio" name="select" id="select"
										onfocus="resetValidate();"
										onchange="setSoccerField('<s:property value="id"/>','<s:property value="name" />','<s:property value="image_url" />','<s:property value="district" />','<s:property value="address"/>',
							'<s:property value="toGson()"/>','<s:property value="description"/>')" />
								</s:if> <s:else>x</s:else></td>
						</s:if>
						<td><s:property value="name" /></td>
						<td><s:property value="district" /></td>
						<td><s:property value="address" /></td>
						<td><s:property value="staff.name" /></td>
						<td><s:if test="delete">
            					Đã bị xóa
            				</s:if> <s:elseif test="status">
            					Kích hoạt
            				</s:elseif> <s:else>
            					Chưa kích hoạt
            				</s:else></td>
						<td><table>
								<tbody>
									<s:iterator value="listTimeDivision" status="rowstatus">
										<s:if test="#rowstatus.index % 5 == 0">
											<tr>
												<td colspan="2"><span style="font-weight: bold;"><s:property
															value="subSoccerField" /></span></td>
											</tr>
										</s:if>
										<tr>
											<td><s:property value="period" /></td>
											<td style="text-align: right;"><s:property
													value="getPriceFormat(price)" /></td>
										</tr>

									</s:iterator>
								</tbody>
							</table></td>

						<td><s:property value="description" escapeHtml="false" /></td>
					</tr>
				</s:iterator>
			</s:else>
		</tbody>
	</table>
</div>

<script type="text/javascript">
	var time;
	function setSoccerField(id, name, image_url, district, address, timeDivision, description) {

		$('#id').val(id);
		$('#name').val(name);
		$('#image_url').val('<%=request.getContextPath()%>' + image_url);
		$('#image').attr('src', '<%=request.getContextPath()%>' + image_url);
		$('#district').val(district);
		$('#address').val(address);

		time = JSON.parse(timeDivision);

		if (time.length <= 5) {
			for (var i = 1; i <= time.length; i++) {
				$("input[name='subSoccerField[0]']").val(time[i - 1].subSoccerField);
				$("input[name='subSoccerFieldId[0]']").val(time[i - 1].id);
				$("select[name='period" + i + "[0]']").val(time[i - 1].period);
				$("input[name='price" + i + "[0]']").val(time[i - 1].price);
			}
		} else {
			for (var j = 1; j < (time.length / 5); j++) {
				addRow('subFieldName');
			}
			
			for (var j = 0; j < (time.length / 5); j++) {
				var k = 0;
				for (var i = 1 + 5*j ; i <= time.length/(time.length / 5 - j); i++) {
					k++;
					$("input[name='subSoccerField["+j+"]']").val(time[i - 1].subSoccerField);
					$("input[name='subSoccerFieldId["+j+"]']").val(time[i - 1].id);
					$("select[name='period" + k + "["+j+"]']").val(time[i - 1].period);
					$("input[name='price" + k + "["+j+"]']").val(time[i - 1].price);
				}
			}

		}

		CKEDITOR.instances['description'].setData(description);

		return false;
	}

	function resetValidate() {
		$('#error_message').css('display', 'none');
		$('label.error').hide();
		$('.error').removeClass('error');
	}
</script>
